/**
 * 文本差异展示组件
 * 展示原始文本和润色后文本的差异
 */
import React, { useState } from 'react';
import {
  Box,
  Typography,
  Paper,
  Button,
  Collapse,
  useTheme,
  alpha,
  Tooltip
} from '@mui/material';
import {
  KeyboardArrowDown as KeyboardArrowDownIcon,
  KeyboardArrowUp as KeyboardArrowUpIcon,
  CheckCircleOutline as CheckCircleOutlineIcon,
  FormatPaint as FormatPaintIcon,
  InfoOutlined as InfoOutlinedIcon
} from '@mui/icons-material';
import { TextDiff } from '../../../types/ai.ts';

interface TextDiffDisplayProps {
  diffResult: TextDiff;
  onReplace: () => void;
  isReplaceEnabled?: boolean;
}

/**
 * 文本差异展示组件 - 优化版
 * 自动展示差异，简化界面，移除冗余信息
 */
const TextDiffDisplay: React.FC<TextDiffDisplayProps> = ({
  diffResult,
  onReplace,
  isReplaceEnabled = true
}) => {
  const theme = useTheme();
  const [expanded, setExpanded] = useState(true);
  
  // 切换展开/折叠状态
  const toggleExpanded = () => {
    setExpanded(!expanded);
  };
  
  return (
    <Paper
      elevation={0}
      sx={{
        mt: 2,
        mb: 2,
        border: `1px solid ${alpha(theme.palette.primary.main, 0.2)}`,
        borderRadius: 1,
        overflow: 'hidden'
      }}
    >
      {/* 标题栏 - 简化设计 */}
      <Box
        sx={{
          display: 'flex',
          justifyContent: 'space-between',
          alignItems: 'center',
          p: 1,
          pl: 2,
          backgroundColor: alpha(theme.palette.primary.main, 0.05),
          borderBottom: expanded ? `1px solid ${alpha(theme.palette.divider, 0.5)}` : 'none'
        }}
      >
        <Box sx={{ display: 'flex', alignItems: 'center' }}>
          <FormatPaintIcon 
            fontSize="small" 
            sx={{ mr: 1, color: theme.palette.primary.main }} 
          />
          <Typography variant="subtitle2">文本润色预览</Typography>
          
          <Tooltip title="点击应用润色按钮将使用润色后的文本替换编辑器中的选中内容">
            <InfoOutlinedIcon 
              fontSize="small" 
              sx={{ ml: 1, color: theme.palette.text.secondary, fontSize: '1rem' }} 
            />
          </Tooltip>
        </Box>
        
        <Box>
          <Button
            size="small"
            color="primary"
            variant="text"
            onClick={toggleExpanded}
            endIcon={expanded ? <KeyboardArrowUpIcon /> : <KeyboardArrowDownIcon />}
          >
            {expanded ? "折叠" : "展开"}
          </Button>
        </Box>
      </Box>
      
      {/* 差异内容区 - 简化设计 */}
      <Collapse in={expanded}>
        <Box sx={{ p: 2 }}>
          {/* 差异内容 */}
          <Box
            sx={{
              p: 1.5,
              borderRadius: 1,
              backgroundColor: alpha(theme.palette.background.default, 0.5),
              border: `1px solid ${alpha(theme.palette.divider, 0.5)}`,
              fontSize: '0.875rem',
              lineHeight: 1.8,
              '& ins.ai-replaced-text-added': {
                backgroundColor: alpha('#4caf50', 0.1),
                color: '#388e3c',
                textDecoration: 'none',
                padding: '0 2px',
                borderRadius: '2px',
              },
              '& del.ai-replaced-text-deleted': {
                backgroundColor: alpha('#f44336', 0.1),
                color: '#d32f2f',
                textDecoration: 'line-through',
                padding: '0 2px',
                borderRadius: '2px',
              },
              '& div': {
                lineHeight: 2,
                letterSpacing: '0.01em',
                wordBreak: 'break-word',
              }
            }}
            dangerouslySetInnerHTML={{ __html: diffResult.diffHtml }}
          />
          
          {/* 替换按钮 - 保留唯一的"应用润色"按钮 */}
          <Box sx={{ mt: 2, display: 'flex', justifyContent: 'flex-end' }}>
            <Button
              variant="contained"
              color="primary"
              onClick={onReplace}
              disabled={!isReplaceEnabled}
              startIcon={<CheckCircleOutlineIcon />}
              size="small"
            >
              应用润色
            </Button>
          </Box>
        </Box>
      </Collapse>
    </Paper>
  );
};

export default TextDiffDisplay; 